<template>
	<view class="page-user-info">
		<view class="form-item">
			<view class="label">姓名：</view>
			<input class="form-input" placeholder="请填写您的姓名" type="text" v-model="name" />
		</view>
		<view class="form-item">
			<view class="label">手机号后4位：</view>
			<input class="form-input" placeholder="请填写您的手机号后4位" type="number" v-model="mobile" />
		</view>
		<view class="form-item">
			<button class="form-btn" type="primary" size="mini" @tap="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user.js'
	export default {
		data() {
			return {
				name: '',
				mobile: ''
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				UserApi.getUserInfo().then(res => {
					console.log(res)
					const { name, mobile } = res.data
					this.name = name
					this.mobile = mobile
				})
			},
			
			onSubmit() {
				console.log(this.name, this.mobile)
				
				if(this.validate()) {
					UserApi.setUserInfo({name: this.name, mobile: this.mobile}).then(res => {
						this.$success(res.message)
					})
				}
			},
			
			validate() {
				if(!this.name) {
					this.$toast('姓名不能为空哦')
					return false
				}
				
				// 验证手机号
				// const reg=/^[1][3,4,5,7,8,9][0-9]{9}$/
				// 验证四位数字
				const reg = /^\d{4}$/
				if(!this.mobile || !reg.test(this.mobile)) {
					this.$toast('请填写手机号后4位')
					return false
				}
				
				return true
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/common.scss';
	
	page {
		background-color: $page-bg-color;
	}
.page-user-info{
	padding: 100rpx;
	.form-item{
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		.label{
			width: 250rpx;
		}
		
		.form-input{
			background-color: #fff;
			padding: 14rpx 20rpx;
		}
		
		.form-btn{
			margin-top: 10rpx;
			width: 200rpx;
		}
		
		
	}
	
	.notice{
		display: flex;
		padding: 16rpx 30rpx;
		font-size: 14px;
	}
}
</style>
